<template>
    <div class="property" :class="readonly ? 'readonly_true' : ''">
        <div class="item_name" :title="`${property.name}(${property.description})`" v-if="propertyName !== '二维坐标'">{{
            property.name }}</div>
        <div class="readonly_flag">
            <Number2Porp :withUndefined="withUndefined" :propertyName="propertyName" :defaultValue="defaultValue"
                v-model="number2Ref" :readonly="readonly" :lonLatFormat="lonLatFormat">
            </Number2Porp>
        </div>

    </div>
</template>


<script setup lang="ts">
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import { onBeforeUnmount } from "vue"
import Number2Porp from "../commons/Number2Porp.vue"
import { PropertyCompCallbackFuncParamsType } from "./base";

const props = withDefaults(defineProps<{
    property: any,
    lonLatFormat?:string
}>(), {
})
const emits = defineEmits<{
    (e: 'callback', params: PropertyCompCallbackFuncParamsType): void;
}>();

type Number2 = [number, number]
const { property } = props
const readonly = property.readonly
const propertyName = property.name
const withUndefined = property.withUndefined
const disposer = createVueDisposer(onBeforeUnmount)
const number2Ref = readonly ? toReadonlyVueRef<Number2 | undefined>(disposer, property.reactVar, s => s && ([...s] as Number2)) : toVR<Number2 | undefined>(disposer, property.reactVar, s => s && ([...s] as Number2))
const defaultValue = property.defaultValue 
</script>
<style scoped>
.property {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.item_name {
    width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: rgba(230, 230, 230, 1);
    font-size: 14px;
}

.readonly_flag {
    flex: 1;
}

.readonly_true {
    cursor: not-allowed;
    cursor: no-drop;
}
</style>
